<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog system-user-dialog"
      :custom-class="'panna-dialog_big'"
      :append-to-body="true"
      :title="dataList.ChangeRequestDetails"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="innerDialogFormVisible"
    >
      <DeviceChangeView :id="id"></DeviceChangeView>
    </el-dialog>
  </div>
</template>

<script>
import DeviceChangeView from "./DeviceChangeView.vue";
import { get } from "../../api/DeviceChange.js";
export default {
  name: "DeviceChangeViewDialog",
  components: { DeviceChangeView },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      innerDialogFormVisible: false,
      formLabelWidth: "100px",
      list: [],
      formData: {
        id: "",
        num: "",
        calibrationDate: "",
        type: "",
        typeName: "",
        statusId: null,
        statusName: "",
        stopDate: "",
        creatorId: "",
        creatorName: "",
        reason: "",
        deviceNum: "",
        remark: "",
      },
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  watch: {
    dialogFormVisible(val) {
      this.innerDialogFormVisible = val;
    },
    innerDialogFormVisible(val) {
      this.$emit("update:dialogFormVisible", val);
    },
  },
  created() {
    this.innerDialogFormVisible = this.dialogFormVisible;
    get({ id: this.id }).then((res) => {
      this.formData = res.data;
      this.list = res.data.deviceDtos;
    });
  },
  methods: {
    cancel() {
      this.innerDialogFormVisible = false;
    },
    closeDialog() {
      this.cancel();
    },
  },
};
</script>
